<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>学生成绩</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/grade.css">
    <link rel="stylesheet" href="../css/main.css">
</head>

<body>
    <div id="container">
        <div class="contain">
            <div class="header">
                <div class="header_title">成绩列表</div>
                <img src="/wechat/image/return.png" alt="" class="return" onclick="history.back()">
            </div>
            <div class="content" id="vue-root">
                <div class="grade ui-select">
                    <select id="issue" v-model="termId">
                        <option :value="undefined" disabled="disabled">请选择期号</option>
                        <option v-for="term in terms" :key="term.id" :value="term.id" v-text="term.name">
                        </option>
                    </select>
                </div>
                <table class="score">
                    <tbody>
                        <tr>
                            <td>姓名 : </td>
                            <td v-text="student.name"></td>
                        </tr>
                        <tr>
                            <td>班级 : </td>
                            <td v-text="student.classesName"></td>
                        </tr>
                        <tr>
                            <td>学号 : </td>
                            <td v-text="student.studentNo"></td>
                        </tr>
                        <template v-for="item in list">
                            <tr>
                                <td v-text="item.name+' ：'"></td>
                                <td v-text="item.score"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script src="/js/common.js"></script>

    <script>

        var app = new Vue({
            el: '#vue-root',
            data: {
                termId: null,
                terms: [],
                student: getStudent(),
                list: []
            },
            created: function () {
                axios.get('/s/score/term').then(function (res) {
                    this.terms = res.data;
                }.bind(this));
            },
            methods: {
                getData: function (termId) {
                    axios.get('/s/score/' + termId).then(function (res) {
                        this.list = res.data;
                    }.bind(this));
                }
            },
            watch: {
                termId: function (newValue, oldValue) {
                    if (newValue) this.getData(newValue);
                }
            }
        });

        updateUnread('score');

    </script>


</body>

</html>